<template>
  <div class="rightMain">
    <div class="title">{{ title }}</div>

    <div class="ss6" v-if="flag1">

      <div class="ss7" v-for="(item,index) in customerRepetitionRange" :key="index">
        <div class="ss8">{{ item.name }}</div>
        <div class="ss10" @click="recordData(item.optionCode)">
          <CommonSelect :myStyles="selectStyle" :dataList="selectList"
                        :default="getSelectStr(item.optionValue)" :keys="'name'" @returnData="setData"></CommonSelect>
        </div>
      </div>

      <div class="ss5">{{  $t('text.System.l274')  }}</div>
      <div class="ss12">
        <div class="ss11" v-for="(item,index) in buyLosingCustomers" :key="index">
          <div class="ss8">{{ item.name }}</div>
          <div class="ss10" v-if="item.elementType===2">
            <el-switch v-model="item.optionValue" :loading="item.loading" @change="beforeChange(item)"
                       :style="switchStyle"/>
          </div>
          <div class="ss10" v-else-if="item.elementType===1">
            <input v-model="item.optionValue" type="number" @blur="changeInput(item.optionCode,item.optionValue)"
                   oninput="value=value.replace(/[^0-9.]/g,'')">{{
              $t('text.System.l6')
            }}
          </div>
        </div>
      </div>


      <div class="ss5">{{  $t('text.System.l275')  }}</div>
      <div class="ss12">
        <div class="ss11" v-for="(item,index) in toRentOutCustomers" :key="index">
          <div class="ss8">{{ item.name }}</div>
          <div class="ss10" v-if="item.elementType===2">
            <el-switch v-model="item.optionValue" :loading="item.loading" @change="beforeChange(item)"
                       :style="switchStyle"/>
          </div>
          <div class="ss10" v-else-if="item.elementType===1">
            <input v-model="item.optionValue" type="number" @blur="changeInput(item.optionCode,item.optionValue)"
                   oninput="value=value.replace(/[^0-9.]/g,'')">{{
              $t('text.System.l6')
            }}
          </div>
        </div>
      </div>

      <div class="ss5">{{  $t('text.System.l276')  }}</div>
<!--      customerGrade-->
      <dialog-layout :left-title="$t('text.System.l225')" :title="$t('text.System.l226')"
                     :add-title="$t('text.System.l227')" type-code="customerGrade" :del-fail-title="$t('text.System.l228')"
                     :del-fail-left-title="$t('text.System.l229')" :del-context-title1="$t('text.System.l230')"
                     :delete-title="$t('text.System.l231')"></dialog-layout>

      <div class="ss5">{{  $t('text.System.l277')  }}</div>
<!--      customerSourceChannel-->
      <dialog-layout :left-title="$t('text.System.l225')" :title="$t('text.System.l226')"
                     :add-title="$t('text.System.l227')" type-code="customerSourceChannel" :del-fail-title="$t('text.System.l228')"
                     :del-fail-left-title="$t('text.System.l229')" :del-context-title1="$t('text.System.l230')"
                     :delete-title="$t('text.System.l231')"></dialog-layout>

      <div class="ss5">{{  $t('text.System.l278')  }}</div>
<!--        purpose-->
        <dialog-layout :left-title="$t('text.System.l225')" :title="$t('text.System.l226')"
                       :add-title="$t('text.System.l227')" type-code="purpose" :del-fail-title="$t('text.System.l228')"
                       :del-fail-left-title="$t('text.System.l229')" :del-context-title1="$t('text.System.l230')"
                       :delete-title="$t('text.System.l231')"></dialog-layout>


    </div>

  </div>
</template>

<script>

import CommonSelect from "../../components/input/CommonSelect.vue";
import {ElMessage} from 'element-plus'
import DialogLayout2 from "@/views/systemSetting/components/DialogLayout2.vue";
import {buyLosingCustomers, customerRepetitionRange, toRentOutCustomers,selectList} from "@/views/systemSetting/data/SourceTourists";
import {findAllOptions, updateOptions} from "@/http/api";
import {translate as $t} from "@/language";

export default {
  name: "SourceTourists",
  components: {
    DialogLayout: DialogLayout2,
    CommonSelect: CommonSelect,
  },
  props: {
    title: String
  },
  data() {
    return {
      selectStyle: {border: 'none', justifyContent: 'flex-end'},
      switchStyle: {height: '15px'},
      value1: true,
      loading1: false,
      selectList,
      customerRepetitionRange,
      buyLosingCustomers,
      toRentOutCustomers,
      flag1: false,
      data: {
        optionCode: '',
        optionValue: null
      },
    }
  },
  created() {
    this.findAllOptions()
  },
  mounted() {
  },
  methods: {
    $t,
    findAllOptions() {
      findAllOptions().then(res => {
        console.log('res', res)

        for (let item in res) {

          //客源重复范围： repeatScopeCustomer
          for (let one of this.customerRepetitionRange) {
            // console.log('one: ', one)
            if (one.optionCode === item) {
              one.optionValue = one.elementType === 2 ? (parseInt(res[item].optionValue) === 1 ? true : false) : res[item].optionValue
            }
          }

          //求购掉客：
          for (let one of this.buyLosingCustomers) {
            // console.log('one: ', one)
            if (one.optionCode === item) {
              one.optionValue = one.elementType === 2 ? (parseInt(res[item].optionValue) === 1 ? true : false) : res[item].optionValue
            }
          }

          //求租掉客:
          for (let one of this.toRentOutCustomers) {
            // console.log('one: ', one)
            if (one.optionCode === item) {
              one.optionValue = one.elementType === 2 ? (parseInt(res[item].optionValue) === 1 ? true : false) : res[item].optionValue
            }
          }

        }
        this.flag1 = true
      })
    },
    beforeChange(item) {
      // console.log("item", item)
      this.data.optionCode = item.optionCode
      this.data.optionValue = item.optionValue ? 1 : 0

      item.loading = true
      this.updateOptions()
      return new Promise((resolve) => {
        setTimeout(() => {
          item.loading = false
          // ElMessage.success('Switch success')
          return resolve(true)
        }, 500)
      })
    },
    setData(data) {
      this.data.optionValue = data.value
      this.updateOptions()
    },
    changeInput(optionCode, optionValue) {
      // console.log('changeInput.value',value)
      this.data.optionCode = optionCode
      this.data.optionValue = optionValue
      this.updateOptions()
    },
    updateOptions() {
      // console.log('data',this.data)
      let data = `{"${this.data.optionCode}":"${this.data.optionValue}"}`
      // console.log('data: ',JSON.parse(data))
      updateOptions(JSON.parse(data)).then(res => {
        // console.log('res', res)
        res == null ? '' : ''
        ElMessage.success(this.$t('text.System.l37'))
      })
    },
    recordData(optionCode) {
      this.data.optionCode = optionCode
    },
    getSelectStr(value) {
      console.log("getSelectStr.value",value)
      for (let item of this.selectList) {
        // console.log('item',item)
        if (value + '' === item.value + '') {
          // console.log('item.name',item.name)
          return item.name
        }
      }
    },
    beforeChange1() {
      this.loading1 = true
      return new Promise((resolve) => {
        setTimeout(() => {
          this.loading1 = false
          ElMessage.success('Switch success')
          return resolve(true)
        }, 500)
      })
    }

  },
  watch: {},
  computed: {}

}
</script>
<style scoped>
.ss12 {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss11 {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
}

input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
  -webkit-appearance: none;
}

input[type="number"] {
  -moz-appearance: textfield;
  appearance: none;
}

input {
  border: none;
  outline: none;
  text-align: end;
}

textarea {
  width: 100%;
  border: none;
  outline: none;
}


.title {
  background: #f2f2f2;
  color: gray;
  height: 40px;
  line-height: 40px;
}

.rightMain {
  width: 100%;
  margin: 10px 15px;
  border: 1px solid #eee;
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.ss7 {
  display: flex;
  justify-content: space-between;
  border: 1px solid #eee;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  margin-bottom: 15px;
}

.ss6 {
  display: flex;
  padding: 7px 10px;
  color: gray;
  font-size: 12px;
  flex-direction: column;
  min-width: 300px;
  padding: 30px 100px;
  overflow: auto;
  height: 100%;
}

.ss5 {
  text-align: left;
  color: #444;
  padding: 7px 0px;
  font-size: 13px;
}
</style>
  